#{extends '/template/main.html' /}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>包房预定</title>
    <style>
        .coach {
            height: auto;
            overflow: hidden;
            padding: 20px 50px;
        }

        .coach_tit {
            text-align: left;
            line-height: 40px;
            border-bottom: 1px #dddddd solid;
        }

        .coach_tit h1 {
            font-size: 18px;
            color: #333;
        }

        .coach_left {
            width: 100%;
            float: left;
        }

        .coach_right {
            width: 47%;
            float: right;
        }

        .coach_stit {
            text-align: left;
            line-height: 40px;
            margin: 10px 30px;
        }

        .coach_stit h3 {
            font-size: 18px;
            color: #454545;
        }

        .coach_list {
            padding: 5px 30px;
            list-style:none;
        }

        .coach_list li {
            float: left;
            width: 40%;
            margin: 20px 20px;
        }

        .coach_list li a {
            display: block;
            width: 100%;
            height: 80px;
            line-height: 2em;
            overflow: hidden;
            background: #fff;
            text-align: center;
            border: 1px #0894ec solid;
            text-decoration: none;
            border-radius: 5px;
        }

        .coach_list li a p {
            font-size: 18px;
            margin: 0;
            padding: 0;
            margin-top: 10px;
            color: #0894ec;
        }

        .coach_list li a span {
            font-size: 14px;
            color: #f60;
        }

        .coach_list li a:hover {
            background: #f3f3f3;
        }

        .coach_list li.disabled a {
            border: 1px #dddddd solid;
            height: 45px
        }

        .coach_list li.disabled a p {
            color: #666;
        }

        .coach_list li.disabled a span {
            color: #666;
        }

        .coach_list li.disabled a:hover {
            background: #fff;
        }

        .coach_list li.active a {
            border: 1px #f60 solid;
            background: url('/public/images/right-icon.png') right top no-repeat;
        }
    </style>
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">包房预定&nbsp;:&nbsp;<font color="red">${room.roomName}</font></h3>
        <div class="panel-options">
            <a href="#" data-toggle="panel">
                <span class="collapse-icon">&ndash;</span>
                <span class="expand-icon">+</span>
            </a>
        </div>
    </div>
    <div class="panel-body">
        <div class="coach">
            <div class="coach_left">
                <ul class="coach_list" id="one">
                #{list coachVOList , as :'vo'}
                    <li class="bespeak">
                        <a href="javascript:return false;">
                            <p>${vo?.beginAt?.format('HH:mm')} - ${vo?.endAt?.format('HH:mm')}</p>
                            <input type="hidden" value="${vo?.goodsId}"/>
                            <span>${vo?.price} 元</span>
                        </a>
                    </li>
                #{/list}
                </ul>
            </div>
        </div>
        <form method="post" id="bespeakForm" action="/BS0017/admin/order/createForRoom">
            <input type="hidden" name="goodsIds" id="goodsIds"/>
            <input type="hidden" name="webUser.id" value="1"/>
            <input type="hidden" name="merchant.id" value="1"/>
        </form>
        <button class="btn btn-turquoise btn-lg" id="bespeak_btn" style="float: right;">确认预约</button>
    </div>
</div>
<script>

    $(function () {
        $(document).on("click", ".bespeak", function () {
            if ($(this).attr("chosen") == "y") {
                $(this).removeClass("active");
                $(this).attr("chosen", "n");
            } else {
                $(this).addClass("active");
                $(this).attr("chosen", "y");
            }
        });

        $(document).on("click", "#bespeak_btn", function () {
            var bespeak_goods = "";
            var content = "";
            if($(".bespeak[chosen='y']").length <= 0){
                toastr.info('请至少选择一个时段进行预约');
                return;
            }
            var i = 0;
            $(".bespeak[chosen='y']").each(function(){
                if(i > 0) {
                    bespeak_goods += ",";
                    content += "&nbsp;,&nbsp;";
                }
                bespeak_goods += $(this).find("input").val();
                content += $(this).find("p").html();
                i ++;
            })

            $("#goodsIds").val(bespeak_goods);

            normalComfim("确认要预约时段&nbsp;:&nbsp;<font color='red'>"+content+"</font>&nbsp;吗?");

        });
    })

    //点击确认删除 之后执行的方法
    function sureConfirm() {
        $("#bespeakForm").submit();
    }

</script>
</body>
</html>
